<template>
  <el-card>
    <!-- 表头 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="searchObjtow.roleName"
          size="small "
          placeholder="用户名"
        ></el-input>
      </el-form-item>

      <el-form-item style="margin: 0 20px">
        <el-button
          type="primary"
          @click="onSubmit"
          size="small"
          icon="el-icon-zoom-out"
          >查询</el-button
        >
        <el-button size="small"  @click="empty">清空</el-button>
      </el-form-item>
    </el-form>

    <div style="margin: 20px 0">
      <el-button type="primary" size="small"  @click="addnewrole" >添加</el-button>
      <el-button type="danger" size="small "  @click="deleterolelist">批量删除</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="roles"   border style="width: 100%"  @selection-change="handleSelectionChange">
       <el-table-column
        type="selection"
        width="55" />

      <el-table-column fixed type="index" label="序号" width="100">
      </el-table-column>
      <el-table-column  label="角色名称" >

        <template slot-scope="{row}" >
          <template v-if="row.edit===true">
            <el-input v-model="row.roleName" class="edit-input" size="small" />
            <el-button
              class="cancel-btn"
              size="small"
              icon="el-icon-refresh"
              type="warning"
              @click="cancelEdit(row)"
            >
              取消
            </el-button>
          </template>
          <span v-else>{{ row.roleName }}</span>
        </template>

         </el-table-column>

      <el-table-column fixed="right" label="操作" width="400" align="center">
        <template slot-scope="{row}">
          <el-button type="info" size="small" 
           icon="el-icon-info"  title="分配权限"
            @click="$router.push({
              name:'RoleAuth',
              params:{
                id:row.id,
                roleName:row.roleName 
              }
            })"></el-button>
          <el-button @click="handleClick(row)"  title="确认更新数据" type="primary" size="small" icon="el-icon-user-solid"></el-button>
          <el-button type="primary" size="small"  title="修改角色" @click="editnum(row)"  icon="el-icon-edit"></el-button>
          <el-button type="danger" size="small"  icon="el-icon-delete" @click="deletedrole(row)" ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
    style="margin-top:15px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="100"
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total">
    </el-pagination>






  </el-card>
</template>

<script>
//引入api
import roleApi from '@/api/acl/role'

import { Empty, Message } from 'element-ui';
export default {
  name: "User",

  data() {
    return {
      formInline: {
        user: "",
        region: "",
        },

        // 分页
        page:1,
        limit:5,
        rolelist:[],
        total:0,
      //查询数据
      searchObj:{  //获取到的数据
        roleName:''
      },
      searchObjtow:{ //需要携带搜索的内容
        roleName:''
      },
      //批量删除，监测到变化的数组
      setdeletelist:[],  // 所有选中的角色列表
      //table表格
    roles: [], // 角色列表
    ishow:false
    };
  },
  methods: {



//======获取用户信息=====//

    async getpagelist(){
    try {
      
      const result=await roleApi.getPageList(this.page,this.limit,this.searchObj)

            console.log(result)
      if(result.code===20000){
        console.log(result)
        this.rolelist=result.data
        this.total=result.data.total
        const {items}=result.data
     this.roles=items.map(item=>{
      item.edit=false,
        item.originRoleName = item.roleName // 缓存角色名称, 用于取消
       
            return item
     })

      console.log("roles",this.roles)
      }
      } catch (error) {
        console.log('错误',error)
         
        }    
  },


//=========分页============//
    handleSizeChange(val) {
       this.limit=val
        this.getpagelist()
    },
    handleCurrentChange(val) {
        this.page=val
         this.getpagelist()
      },
    
//============================//

//==========查询===========//
    onSubmit() {
    this.searchObj=this.searchObjtow
      this.getpagelist()

    },
  //清空
    empty(){
      this.searchObj={
         roleName:''
      },
      this.searchObjtow={
          roleName:''
      }
      this.getpagelist()
    },

//==========添加============//
addnewrole(){

 this.$prompt('添加角色', '请输入新名称', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
       roleApi.save({roleName:value})
   
        this.$message({
            type: 'success',
            message: '添加成功: ' + value
          });
          
         this.getpagelist()
 
  
      
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });

},
//===========删除===============//
deletedrole(row){
  
   this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await roleApi.removeById(row.id)
           this.getpagelist()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

},

//=============批量删除=============//
async deleterolelist(){

  this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           console.log(this.setdeletelist)
  const ids=this.setdeletelist.map(item=>item.id)
  console.log(ids)
       roleApi.removeRoles(ids)
         this.getpagelist()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

},
//element 自带属性  负责监测复选框是否选择
handleSelectionChange(val){
  console.log("监测",val)
  this.setdeletelist=val //勾选中的会显示在数组中
  
},

//============更新=========//
async handleClick(row){
  console.log('更新',row)
  try {
    const user={id: row.id, roleName: row.roleName}
    await roleApi.updateById(user)
     this.getpagelist()
          this.$message({
            type: 'success',
            message: '更新成功!'
          });
  } catch (error) {
     this.getpagelist()
          this.$message({
            type: 'danger',
            message: '更新失败，请稍后重试!'
          });
  }
},

//===========修改====================//
//取消修改
cancelEdit(row){
  console.log(row)
    row.originRoleName = row.roleName
    row.edit = false  //弹框修改框关闭
    this.$message.warning('取消修改角色')
     this.getpagelist()
},

//修改按键功能
editnum(row){
  row.edit=true

  console.log('显示',row)

}








  },


  mounted() {
 this.getpagelist()
  },
};
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}</style>
